<!--
 ՞˶･֊･˶՞ಣ Author       : Charlie
 ՞˶･֊･˶՞ಣ Date         : 2024-11-03 17:14:45
 ՞˶･֊･˶՞ಣ LastEditors  : Charlie
 ՞˶･֊･˶՞ಣ LastEditTime : 2024-12-01 17:36:33
 ՞˶･֊･˶՞ಣ Description  : 路由入口，添加切换主题挂件和飘雪图
-->
<template>
  <div id="app">
    <div class="light">
      <div class="line"></div>
      <img
        v-if="!isLight"
        src="./assets/img/light.png"
        alt=""
        style="width: 50px; height: 70px; position: relative; top: -8px"
        @click="lightClickFn"
      />
      <img
        v-else
        src="./assets/img/light2.png"
        alt=""
        style="width: 50px; height: 70px; position: relative; top: -8px"
        @click="lightClickFn"
      />
    </div>
    <Snow
      :isShowOne="isLight"
      :styleObj="
        isLight
          ? { filter: 'drop-shadow(0 0 10px rgba(221, 222, 217, 0.5))' }
          : { filter: 'drop-shadow(0 0 10px white)' }
      "
      style="position: absolute; top: 0; left: 0; height: 100vh"
    />
    <router-view />
  </div>
</template>
<script>
import Snow from '@/components/Snow'
export default {
  name: 'LoginTab',
  components: { Snow },
  data() {
    return {
      isLight: true,
    }
  },
  methods: {
    lightClickFn() {
      this.isLight = !this.isLight
      const cName = this.isLight ? 'light' : 'dark'
      document.documentElement.setAttribute('data-theme', cName)
    },
  },
}
</script>
<style lang="scss" scoped>
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  width: 100vw;
  min-height: 100vh;
}

// 滚动条隐藏
::-webkit-scrollbar {
  display: none;
}

/* 灯笼的动画效果 */
@keyframes swing {
  0% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(-6deg);
  }
}

.light {
  position: fixed;
  right: 0;
  top: 0;
  width: 60px;
  height: 100px;
  // background-color: #fff;
  z-index: 10;
  /* 设置旋转点 */
  transform-origin: top center;
  animation: swing 3s infinite ease-in-out;
  pointer-events: none;

  .line {
    float: right;
    height: 30px;
    width: 35px;
    border-left: 2px solid #e0dbd3;
  }

  img {
    pointer-events: all;
    cursor: pointer;
    transition: 0.2s all;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
<style lang="scss">
.el-select-dropdown__item.selected,
.el-button--text{
  @include activeFontColor;
}
.el-switch.is-checked .el-switch__core{
  @include activeBgColor;
  border-color: none;
}
.el-switch__core{
  @include mainBg;
}
</style>